<template>
  <!-- 微信分享 -->
  <div>
    <div class="qrcodetitle">微信扫一扫打开</div>
    <vue-qr :text="url" :size="180" :margin="0"></vue-qr>
    <div class="copyBtn" slot="copybtnslot" @click="copy">复制链接</div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
  data () {
    return {}
  },

  props: {
    url: {
      type: String,
      default: ''
    }
  },

  components: {
    vueQr
  },

  methods: {
    /** 复制 */
    copy () {
      var type = '', msgText = ''
      let pro = new Promise(resolve => {
        this.$copyText(this.url).then(function (e) {
          type = 'success'
          msgText = '复制成功！'
          resolve()
        }, function (e) {
          type = 'error',
          msgText = '复制失败！'
          resolve()
        })
      })
      pro.then(() => {
        this.$notify({
          title: '提示',
          type: type,
          message: msgText
        })
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.close_mask {
  position: absolute;
  width: 25px;
  height: 25px;
  display: inline-block;
  right: -10px;
  top: -10px;
  z-index: 2;
  cursor: pointer;
}
.qrcodetitle {
  padding: 20px 0;
  font-size: 16px;
  color: #999;
}
.copyBtn {
  width: 110px;
  height: 40px;
  line-height: 40px;
  background: #2e9cf1;
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  font-size: 14px;
  cursor: pointer;
}
</style>